<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录</title>
<!--登录页面标识，不能删除和修改，用于ajax判断302到登录页面-->
<!--THIS_IS_LOGIN_PAGE_FLAG-->
<link rel="stylesheet" type="text/css" href="../lib/mzui/css/mzui.min.css">
</head>

<body>
	<div id="app">
		<div class="page fade scale-from-center display in" style="overflow: hidden">
			<div class="dock blur-lg" style="background: url('../lib/mzui/img/loginBg.jpg') no-repeat center; background-size: cover; top: -2rem; right: -2rem; bottom: -2rem; left: -2rem"></div>
			<div class="dock flex flex-center">
				<div class="modal rounded" style="width: 18rem; height: 10rem; margin: auto;">
					<div class="heading divider primary-pale">
						<div class="title">登录 <span class="reason"> 您没有权限访问该内容或需要登录</span></div>
					</div>
						<div class="content box">
							<div class="control has-label-left"><!-- has-error -->
								<input type="text" name="username" class="input enter-input" v-model="userId" placeholder="用户名">
								<label><i class="icon-user"></i></label>
								<div class="help-text red-txt" v-if="userNameError.length > 0">{{userNameError}}</div>
							</div>
							<div class="control has-label-left">
								<input type="password" name="password" v-model="password" class="input enter-input" placeholder="密码">
								<input type="hidden" name="validateCode" value="1234">
								<label><i class="icon-key"></i></label>
								<div class="help-text red-txt" v-if="passwordError.length > 0">{{passwordError}}</div>
							</div>
							<div class="control">
								<button type="submit" v-on:click="loginSubmit" class="btn block primary">登录</button>
							</div>
						</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="../lib/jquery/jquery-3.1.0.min.js"></script>
<script src="../lib/mzui/js/mzui.min.js"></script>
<script src="../lib/vue/vue.js"></script>
<script src="../lib/mg/js/common.js"></script>
<script src="../lib/mg/js/toast.js"></script>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			userId: "",
			password: "",
			userNameError: "",
			passwordError: ""
		},
		mounted: function(){
			this.init();
		},
		methods: {
			loginSubmit: function() {
				var param = {
					username: app.userId,
					password: app.password,
					validateCode: "1234"
				};
				app.userNameError = "";
				app.passwordError = "";
				if(app.userId == "") {
					app.userNameError = "用户名不能为空";
					return;
				}
				if(app.password == "") {
					app.passwordError = "密码不能为空";
					return;
				}
				// 获取url中"?"符后的字串
				var href = location.href;
				var url = href.substring(href.indexOf("?"), href.length);
				var redirect = "";
                if (url.indexOf("redirect=") > 0) {
					redirect = url.substring(url.indexOf("redirect=") + 9, url.length);
					redirect = decodeURIComponent(redirect);
                } else {
					redirect = ctx + "#/user/login";
                }
                post(ctx + "login", param, function (result) {
                    console.log(result);
                    if (result.errCode == 200) {
                        location.href = redirect;
                    } else {
                        app.passwordError = "登录失败，" + result.errMsg;
                    }
                }, function () {
                    // 通过nginx代理之后没端口，但tomcat容器有端口，会跨域异常，但正常登陆了的，直接跳
                    // location.href = returnUrl;
				});
			},
			init: function () {
				$(".enter-input").keyup(function (e) {
					if (e.keyCode == 13) {
						app.loginSubmit();
					}
				});
			}
		}
	});
</script>

<style>
	.reason{color: #f00;font-size: 12px;}
	.red-txt{color: #f00;}
</style>
</html>



